<!DOCTYPE html>
<html>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/static/assets/css/layui.css" media="all">
    <title>管理车位信息</title>
</head>
<body>
<form class="layui-form layui-card-body" style="margin-top: -10px;margin-left: -15px">
    <div class="layui-input-inline">
        <input type="text" name="title" id="parkPlaceNum" placeholder="车位编号" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <input type="text" name="title" id="carNum" placeholder="车牌号" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <select name="isEmploy" id="isEmploy">
            <option value="">是否空闲</option>
            <option value="是">空闲</option>
            <option value="否">已占用</option>
        </select>
    </div>
    <button type="button" class="layui-btn" id="search">查询</button>
    <button type="button" class="layui-btn" id="reset">重置</button>
    <button type="button" class="layui-btn" id="add">新增车位</button>
    <a href="editCarPark-normal">
        <button type="button" class="layui-btn" id="normal">查看普通车位</button>
    </a>
</form>
<table id="parkPlaceList" lay-filter="test" style="margin-top: -10px"></table>
<script src="/static/assets/layui.all.js" charset="utf-8"></script>
<script src="/static/assets/jquery.min.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">解除绑定</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中行</button>
    </div>
</script>
<script>

    $(function () {

        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#parkPlaceList'
                , url: '/parkPlace/selectAll' //数据接口
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , method: 'post'
                , title: '用户数据表'
                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'parkPlaceId', title: 'ID', sort: true}
                        , {field: 'parkPlaceNum', title: '车位号', sort: true}
                        , {field: 'isEmploy', title: '是否空闲'}
                        , {field: 'desc', title: '车位类型'}
                        , {field: 'carNum', title: '车牌号'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
                    ]
                ]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data.parkPlaces//解析数据列表
                    };
                }
                , page: true //开启分页
                , id: "parkPlaceList"
            });

            $("#search").on("click", function () {
                var parkPlaceNum = $("#parkPlaceNum").val()
                var carNum = $("#carNum").val()
                var isEmploy = $("#isEmploy").val()
                table.reload('parkPlaceList', {
                    where: { //设定异步数据接口的额外参数，任意设
                        parkPlaceNum: parkPlaceNum,
                        carNum: carNum,
                        isEmploy: isEmploy
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            })

            $("#reset").on("click", function () {
                location.reload()
            })

            $("#add").on("click", function () {
                layer.open({
                    type: 2,
                    title: '新增停车位',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['410px', '350px'],
                    content: '/desk/addCarPark' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            })
            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        layer.msg("删除成功")
                        $.ajax({
                            // url:"/user/deleteUser",
                            // type:"post",
                            // dataType:"json",
                            // headers:{'Content-Type':'application/json;charset=utf8'},
                            // data:JSON.stringify({userId:data.userId}),
                            // success:function (data) {
                            //     console.log("删除成功")
                            //     console.log(data)
                            //     table.reload('userList', {
                            //         page: {
                            //             curr: 1 //重新从第 1 页开始
                            //         }
                            //     });
                            // },
                            error: function () {
                                console.log("删除失败")
                            }
                        })
                    });
                } else if (obj.event === 'edit') {
                }
            });
            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        console.log(data)
                        break;
                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                }
                ;
            });

        });

    })

</script>
</body>
</html>
